import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './Tab.module.less'

export default class Tab extends Component {
  tab = React.createRef()
  closeHandle (e) {
    e && e.stopPropagation()
    this.props.closeHandle()
  }

  render () {
    const s = [style.tab]
    if (this.props.active) {
      s.push(style.active)
    }
    return (
      <div ref={this.tab} className={s.join(' ')} onClick={() => this.props.onClick()}>
        <span className={style['tab-text']}>{this.props.title}</span>
        <span className={style['tab-close']} onClick={e => this.closeHandle(e)}>x</span>
      </div>
    )
  }
}

Tab.propTypes = {
  active: PropTypes.bool,
  title: PropTypes.string,
  onClick: PropTypes.func,
  closeHandle: PropTypes.func
}
Tab.defaultProps = {
  active: false,
  title: '',
  onClick: () => {},
  closeHandle: () => {}
}
